<template>
  <el-dialog v-model="visible" :title="!dataForm.companyname ? '新增' : '详情'" :close-on-click-modal="false"
             :close-on-press-escape="false">
    <table class="custom-table">
      <thead>
      <tr>

      </tr>
      </thead>
      <tbody>
      <tr>
        <td>
          <el-text>公司名称:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.companyname }}</el-text>
        </td>
        <td>
          <el-text>平台:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.platform }}</el-text>
        </td>
        <td>
          <el-text>总部:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.headoffice }}</el-text>
        </td>
      </tr>
      <tr>
        <td>
          <el-text>网站:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.website }}</el-text>
        </td>
        <td>
          <el-text>传真:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.fax }}</el-text>
        </td>
        <td>
          <el-text>服务:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.services }}</el-text>
        </td>
      </tr>
      <tr>
        <td>
          <el-text>分部:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.branches }}</el-text>
        </td>
        <td>
          <el-text>公司注册编号:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.companyregisnumber }}</el-text>
        </td>
        <td>
          <el-text>年收入:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.turnover }}</el-text>
        </td>
      </tr>
      <tr>
        <td>
          <el-text>员工数:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.numberofemployees }}</el-text>
        </td>
        <td>
          <el-text>公司建立年份:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.yearofestablishment }}</el-text>
        </td>
        <td>
          <el-text>注册平台时间:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.membersince }}</el-text>
        </td>
      </tr>
      <tr>
        <td>
          <el-text>有效时间:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.expirydate }}</el-text>
        </td>
        <td>
          <el-text>国家:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.country }}</el-text>
        </td>
        <td>
          <el-text>城市:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.city }}</el-text>
        </td>
      </tr>
      <tr>
        <td>
          <el-text>邮箱:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.email }}</el-text>
        </td>
        <td>
          <el-text>简介:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.information }}</el-text>
        </td>
        <td>
          <el-text>地址:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.address }}</el-text>
        </td>
      </tr>
      <tr>
        <td>
          <el-text>销售员:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.salesperson }}</el-text>
        </td>
        <td>
          <el-text>锁定:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.tracklock }}</el-text>
        </td>
        <td>
          <el-text>所属大洲:</el-text>
        </td>
        <td>
          <el-text>{{ dataForm.continent }}</el-text>
        </td>
      </tr>
      </tbody>
    </table>

    <h1>员工信息</h1>

    <div>
      <table class="custom-table">
        <thead>
        <tr>
          <td>
            <el-text>名字:</el-text>
          </td>

          <td>
            <el-text>职位:</el-text>
          </td>
          <td>
            <el-text>电话:</el-text>
          </td>
          <td>
            <el-text>手机:</el-text>
          </td>
          <td>
            <el-text>邮箱:</el-text>
          </td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in personData.personList" :key="index">

          <td>
            {{ item.personname }}
          </td>

          <td>
            {{ item.designation }}
          </td>

          <td>
            {{ item.officenumber }}
          </td>

          <td>
            {{ item.mobilenumber }}
          </td>

          <td>
            {{ item.email }}
          </td>
        </tr>
        </tbody>
      </table>

    </div>


    <template #footer>
      <!--      <el-button @click="visible = false">取消</el-button>-->
      <el-button @click="visible = false">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import baseService from "@/service/baseService";
import {ElMessage} from "element-plus";

const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();

const dataForm = reactive({
  companyname: '',
  platform: '',
  headoffice: '',
  website: '',
  fax: '',
  services: '',
  branches: '',
  companyregisnumber: '',
  turnover: '',
  numberofemployees: '',
  yearofestablishment: '',
  membersince: '',
  expirydate: '',
  country: '',
  city: '',
  email: '',
  information: '',
  address: '',
  crawled: '',
  salesperson: '',
  tracklock: '',
  continent: ''
});


const personData = reactive(
  {
    companyName: "",
    personList: [{
      personname: '',
      designation: '',
      officenumber: '',
      mobilenumber: '',
      email: '',
      companyname: '',
      platform: ''
    }]
  });

const init = (companyname?: string) => {
  visible.value = true;
  dataForm.companyname = "";

  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields();
  }

  if (companyname) {
    getInfo(companyname);
  }
};

// 获取信息
const getInfo = (companyname: string) => {
  baseService.get("/company/company/" + companyname).then((res) => {
    Object.assign(dataForm, res.data);
  });
  personData.personList = []
  let url = "/company/person/qeuryPersonByCompany"
  // let encodedUrl = encodeURIComponent(url);
  var params = {
    companyname: companyname
  }
  baseService.post(url, params).then((res) => {
    Object.assign(personData.personList, res.data);

  });
};


defineExpose({
  init
});
</script>


<style scoped>


.custom-table {


  border-collapse: collapse;


  width: 100%;


}


.custom-table th, .custom-table td {


  border: 1px solid #ddd;


  padding: 8px;


}


.custom-table th {


  background-color: #f2f2f2;


  text-align: left;


}


</style>
